<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-商城首页-登录页面</title>
	<link rel="stylesheet" th:href="@{/css/login.css}"/>
	<style>
		.img{
			margin-right: 10px;
			height: 30px;
			margin-top: -2px;
		}
		.img_pointer{
			cursor: pointer;
		}
		.ret_prompt{
			margin-top: 39px;
			width: 250px;
			height: 18px;
			display: block;
			line-height: 18px;
			font-size: 14px;
			color: #ce5242;
			left: 27px;
			bottom: 89px;
			position: absolute;
		}
		.login_box{
			position:relative;
		}
		.back_jump_clas{display: none}
	</style>
</head>
<body>
	<!-- 登录注册通用页面顶部 -->
	<div class="common_title">
		<img alt="" class="logo2" th:src="@{/images/普惠logo最终版.png}">
		<span class="common_txt">欢迎登录普惠商城</span>
	</div>
	<div class="commonbody">
		<div class="common_box common_bg">
			<div class="login_box">
				<input type="text" class="inputbox user" placeholder="手机号" id = "login_user" maxlength="30">
				<input type="password" class="inputbox password" placeholder="密码" id = "login_pwd" maxlength="16">
				<div style="position: relative;">
					<input type="text" class="inputbox yzm" placeholder="输入验证码" id = "verify_codeval">
					<span class="get_yzm">获取验证码</span>
					<img th:src="@{/member/loadverify}" class="get_yzm img img_pointer" alt="图片验证" id = "verify_codeid">
				</div>
				<span class = "ret_prompt"></span>
				<input type="button" class="inputbox btn img_pointer" value="登录" style="font-size: 18px;" onClick="loginSubmit()" id = "login_submitid"/>
				<div class="login_box_bottom"> 
					<span class="login_box_bottom_txt">还没有账号？<a th:href="@{/member/loadRegister}" class="login_box_bottom_link_1">现在去注册</a></span><a th:href="@{/member/loadRetrievePassword}" class="login_box_bottom_link_2">忘记密码？</a>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<!-- 页面底部 -->
	<div th:include="footer::footer"></div>
	<div id="back_jump_div" class="back_jump_clas">
		<span th:if = "${callBackByGet}" >
			<input type="text" value="1" id="callbackby_getid"/>
			<span th:text = "${callBackByGet}" id="callBackByGetValue"></span>
		</span>
		<span th:if = "${callBackByPost}">
			<input type="text" value="2" id="callbackby_postid"/>
			<span th:utext="${callBackByPost}" id="callBackByPostValue"></span>
		</span>
	</div>
</body>
<script type="text/javascript">	
    var tipsIndex;
    $(function(){
    	loadVerifyCode();//加载验证码
    	//defhiden();
    	bingClosetipsIndex();
    	// 回车事件
    	document.onkeydown = function(e){ 
    	    var ev = document.all ? window.event : e;
    	    if(ev.keyCode==13) {
    	    	loginSubmit();
    	    }
    	}
    });
    function defhiden(){
    	$('.img').css('display','none');
    	$('span.get_yzm').click(function(){
    		$(this).css('display','none');
    		$('.img').css('display','block');
    	});
    }
    //点击跟新验证码
    $("#verify_codeid").click(function(){
    	loadVerifyCode();
    })
    function loadVerifyCode(){
    	var url = "/member/loadverify";
    	$("#verify_codeid").attr("src",url + "?" + Date.parse(new Date()));
    }
    //处理得到焦点后去掉提示
    function bingClosetipsIndex(){
   		$('#login_user').on("focus",function(){
 			if(tipsIndex){
  				layer.close(tipsIndex);
 			}
 			if(isVerifyFlag){
	 			operPrompt("");
 			}
		});
   		$('#login_pwd').on("focus",function(){
 			if(tipsIndex){
  				layer.close(tipsIndex);
 			}
 			if(isVerifyFlag){
	 			operPrompt("");
 			}
		});
   		$('#verify_codeval').on("focus",function(){
 			if(tipsIndex){
  				layer.close(tipsIndex);
 			}
 			if(isVerifyFlag){
	 			operPrompt("");
 			}
		});
    }
	//登录提交
	function loginSubmit(){
		if(isNotNull("login_user")){
			checkTel("login_user",2);
		}
	};
	function loginSubmitOn(){
		$('#login_submitid').attr("disable",true);
		var requesturl = "/member/loginsubmit";
		$.ajax({
			url:requesturl,
			type:"post",
			dataType:"json",
			data:{"accountNumber":$('#login_user').val(),"password":$('#login_pwd').val(),"verifyCode":$('#verify_codeval').val()},
			error:function(){
				layer.msg("系统繁忙，请稍后再试！");
				$('#login_submitid').attr("disable",false);
			},
			success:function(data){
				$('#login_submitid').attr("disable",false);
				if(data.code == "200"){
					var flag = jumpback();
					if(flag){
						window.location.href = "/";
					}
				}else{
					loadVerifyCode();
					$('.ret_prompt').html(data.message);
				}
			}
		});
	}
	//非空验证
	function isNotNull(id){
		var val = $('#'+id).val();
		if(val.trim().length < 1){
			tipsIndex = layer.tips("此处不能为空","#"+id,{tips: 2});
			return false;
		}
		return true;
	};
	function jumpback(){
		var callBackByGetValue = $('#callBackByGetValue').html();
		var callbackby_getid = $('#callbackby_getid').val();
		if(callbackby_getid && callbackby_getid == "1"){
			callBackByGetValue = callBackByGetValue.replace(/&amp;/g,"&");
			window.location.href = callBackByGetValue;
			return false;
		}
		var callbackby_postid = $('#callbackby_postid').val();
		var callBackByPostValue = $('#callBackByPostValue').html();
		if(callbackby_postid && callbackby_postid == "2"){
			$("#back_jump_div").append(callBackByPostValue);
			$("#callback_id").submit();
			return false;
		}
		return true;
	}
	$('#login_user').blur(function(){
		checkTel("login_user",1);
	})
	// 验证手机号
	var isVerifyFlag = false;
	function checkTel(id,type){
		var flag = false;
	    var mobile = $("#"+id).val();
	    if(mobile.trim() == ""){
	    	return flag;
	    }
	    var isMob=/^1(3|4|5|7|8)\d{9}$/;
	    if (isMob.test(mobile)){
	    	$.post("/member/checkPhone",{"phone":$("#login_user").val()},function(data){
				if(data.code == "300"){
					operPrompt("账号不存在");
				}else{
					operPrompt("");
					//登录提交
					if(type == 2){
						if(isNotNull("login_pwd") && isNotNull("verify_codeval")){
							loginSubmitOn();
						}
					}
					flag = true;
					isVerifyFlag = true;
				}
			});
	    }else {
	    	operPrompt("账号格式有误");
	    } 
	    return flag;
	}
	function operPrompt(value){
		$('.ret_prompt').html(value);
	}
</script>
</html>